<!DOCTYPE html>
<html style="background-color: #FFFFFF;">

<head>
    <meta charset="utf-8">
    <title>compare</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../resources/css/mui.css">
    <link rel="stylesheet" href="../../resources/css/style.css">
    <link rel="stylesheet" href="../../resources/css/product/compare.css">
    <script src="../../resources/assets/jquery-1.8.2.min.js"></script>
    <script src="../../resources/assets/jquery.dataTables.js"></script>
    <script src="../../resources/assets/FixedColumns.js"></script>
    <script src="../../resources/assets/iscroll.js"></script>
    <script src="../../resources/assets/datatables.mobile-fixed-columns-table.js"></script>
    <script src="../../resources/assets/mui.js"></script>
    <script src="../../resources/assets/avalon.js"></script>
    <script src="../../resources/js/lang/en.js"></script>
    <script src="../../resources/js/dahua.config.js"></script>
    <script src="../../resources/js/common.js"></script>
    <script src="../../resources/js/product/compare.js"></script>

</head>

<body ms-controller="comparePage" style="overflow">
    <!--头部-->
    <header class="mui-bar mui-bar-nav header" style="position: static;">
        <h1 id="title" class="mui-title">
            Product Compare
        </h1>
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white" id="to"></a>
        <!-- <a class="mui-icon mui-icon-left-nav mui-pull-left mui-icon-white" href="../product/listtest.html?todo=1"></a> -->
        <a class="mui-icon mui-pull-right mui-icon-white home" href="category.html">
            <i class="icon icon_home"></i>
        </a>
    </header>
    <div class="mui-content">

        <div id="loading" class="mui-pull-top-pocket mui-block mui-visibility">
            <div class="mui-pull">
                <div class="mui-pull-loading mui-icon mui-spinner" style="animation: spinner-spin 1s step-end infinite;"></div>
                <div class="mui-pull-caption">Loading...</div>
            </div>
        </div>

        <div class="mui-row">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" ms-if="@data.attrs.length>0">
                <thead id="test_pp">
                    <tr>
                        <th align="center">
                            Product
                        </th>
                        <th ms-for="product in @data.products">
                            <a class="item" ms-attr="{'href': 'pdp.html?id='+@product.id}">
                                <img ms-attr="{src: @product.image}">
                                <span class="attr-label">
										{product.partnumber}
									</span>
                                <!--
										<i class="icon icon_delete_s"></i>
									-->

                            </a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ms-for="attr in @data.attrs" ms-class="{'attr-same': (1 == @attr.isDifferent)}">
                        <td align="center">
                            <span class="attr-columns">
									{attr.name}
								</span>
                        </td>
                        <td align="center" ms-for="product in @data.products">
                            <span class="attr-label">
									{attr.id|getData(product.id)}
								</span>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
    <!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item mui-active" href="category.html">
				<span class="mui-icon icon icon_product active"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item" href="../solution/category.html">
				<span class="mui-icon icon icon_solution"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item" href="../user/user.html">
				<span class="mui-icon icon icon_usercenter"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
-->
</body>

</html>